<template>
  <div class="invoice-container">
    <div class="top">
      <small-card
        class="small-card"
        :title="item.title"
        :bg-color="item.bgColor"
        :end-val="item.endVal"
        :is-up="item.isUp"
        :percent-num="item.percentNum"
        :icon-class="item.iconClass"
        v-for="(item, index) in invoiceCardListData"
        :key="index"
      ></small-card>
    </div>
    <div class="search-wrap">
      <div class="search-input">
        <el-input suffix-icon="el-icon-search" placeholder="搜尋發票號/客戶名稱"></el-input>
      </div>
      <div class="btn-list">
        <el-button>
          <svg-icon icon-class="export"></svg-icon>
          導出
        </el-button>
        <el-button type="primary" @click.native="addInvoiceVisible = true">
          <svg-icon icon-class="staff-add"></svg-icon>
          新增發票
        </el-button>
      </div>
    </div>
    <div class="chart-wrap br-20">
      <div class="handle-wrap">
        <h4>發票類型占比</h4>
        <div class="select-wrap">
          <span>時間：</span>
          <el-select>
            <el-option></el-option>
          </el-select>
        </div>
      </div>
      <div id="chart"></div>
    </div>
    <div class="table-wrap br-20">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="發票號">
          <template>
            <div>
              <div class="text-1">QUOTE-2024-001</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客戶名稱">
          <template>
            <div class="text-1">XXXX科技公司</div>
          </template>
        </el-table-column>
        <el-table-column label="項目名稱">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="發票類型">
          <template>
            <span class="invoice-type">增值稅專用發票</span>
          </template>
        </el-table-column>
        <el-table-column label="金額">
          <template>
            <span>2025-08-06</span>
          </template>
        </el-table-column>
        <el-table-column label="開票日期">
          <template>
            <span>2025-08-06</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="invoiceDetailVisible = true">查看</el-button>
            <el-button type="text" size="small" @click.native="downloadInvoice">下载</el-button>
            <el-button type="text" size="small">核销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <span></span>
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog class="add-invoice-dialog" title="新增发票" :visible.sync="addInvoiceVisible" width="680px" top="1%">
      <el-form :model="addStaffFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="發票類型">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="自動生成或手動輸入"></el-input>
            </el-form-item>
            <el-form-item label="付款方式">
              <el-select v-model="addStaffFormData.name" placeholder="請選擇付款方式">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="開票日期">
              <el-date-picker v-model="addStaffFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
            <el-form-item label="預計付款日期">
              <el-date-picker v-model="addStaffFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="customer-info">
          <h5>客戶資訊</h5>
          <div class="customer">
            <el-form-item label="客戶名稱">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入客戶名稱"></el-input>
            </el-form-item>
            <el-form-item label="稅號">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入稅號"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入地址"></el-input>
            </el-form-item>
            <el-form-item label="聯繫電話">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入聯繫電話"></el-input>
            </el-form-item>
            <el-form-item label="開戶行">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入開戶行"></el-input>
            </el-form-item>
            <el-form-item label="銀行帳戶">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入銀行帳戶"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="project-info">
          <h5>項目關聯</h5>
          <div class="project">
            <el-form-item label="項目名稱">
              <el-select v-model="addStaffFormData.name" placeholder="請選擇項目名稱">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="項目經理">
              <el-input v-model="addStaffFormData.name" autocomplete="off" placeholder="請輸入項目經理"></el-input>
            </el-form-item>
          </div>
          <div style="display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 20px; margin-bottom: 8px">
            <span>發票明細</span>
            <el-button type="text" @click.native="addDetail">添加項目</el-button>
          </div>
          <el-table :data="detailData" :header-cell-style="{ background: 'rgba(60,88,252,0.08)' }">
            <el-table-column label="服務內容">
              <template>
                <el-input size="small" placeholder="項目名稱"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="單位">
              <template>
                <el-input size="small" placeholder="描述"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="數量">
              <template>
                <el-input size="small" placeholder="數量"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="單價">
              <template>
                <el-input size="small" placeholder="單價"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="稅率">
              <template>
                <span></span>
              </template>
            </el-table-column>
            <el-table-column label="金額">
              <template>
                <el-input size="small" placeholder="單價"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template>
                <svg-icon style="font-size: 18px; cursor: pointer" icon-class="delete"></svg-icon>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-button type="text">
              <svg-icon icon-class="add"></svg-icon>
              添加明細
            </el-button>
          </div>
          <el-form-item label="備註" style="width: 100%">
            <el-input type="textarea" placeholder="請輸入備註信息"></el-input>
          </el-form-item>
          <div class="total br-5">
            <div class="total-item">
              <span>合計金額（不含稅）</span>
              <span>￥0.00</span>
            </div>
            <div class="total-item">
              <span>稅額</span>
              <span>￥0.00</span>
            </div>
            <div class="total-item">
              <span style="color: #000">價稅合計</span>
              <span>￥0.00</span>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addInvoiceVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddInvoice">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SmallCard from '@/components/SmallCard/index.vue'
import * as echarts from 'echarts'

export default {
  name: 'invoice-management',
  components: { SmallCard },
  mounted() {
    this.iniChart()
  },
  data() {
    return {
      chart: null,
      addInvoiceVisible: false,
      addStaffFormData: {},
      invoiceDetailVisible: false,
      tableData: [{}],
      invoiceCardListData: [
        { title: '本月開票總額', endVal: 24, isUp: false, percentNum: 12, iconClass: 'invoice-card-1' },
        { title: '待開票', endVal: 16, isUp: false, percentNum: 12, iconClass: 'invoice-card-2' },
        { title: '已核銷發票', endVal: 8, isUp: false, percentNum: 12, iconClass: 'invoice-card-3' },
        { title: '發票作廢率', endVal: 24, isUp: true, percentNum: 12, iconClass: 'invoice-card-4' }
      ]
    }
  },
  methods: {
    submitAddInvoice() {},
    iniChart() {
      this.chart = echarts.init(document.getElementById('chart'))
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
      this.chart.setOption({
        animationDuration: 3000,
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '25%',
          top: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['60%', '90%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10
            },
            label: {
              show: false
              // position: 'center'
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: 16
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '增值稅專用發票' },
              { value: 735, name: '增值稅普通發票' },
              { value: 580, name: '服務發票' },
              { value: 484, name: '其他發票' }
            ]
          }
        ]
      })
    },
    downloadInvoice() {}
  }
}
</script>

<style scoped lang="less">
.invoice-container {
  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .small-card {
      margin-right: 15px;
      //min-width: 300px;
      flex: auto;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    height: 34px;
    margin-bottom: 20px;
    ::v-deep .el-input__inner {
      height: 34px;
    }
    ::v-deep .el-input__icon {
      line-height: 34px;
    }
    ::v-deep .el-button {
      padding: 9px 20px;
    }
    .search-input {
      min-width: 435px;
    }
  }
  .chart-wrap {
    background: #fff;
    padding: 17px 30px;
    height: 305px;
    margin-bottom: 28px;
    .handle-wrap {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      h4 {
        margin: 0;
        font-size: 18px;
        color: #000;
      }
      .select-wrap {
        font-size: 14px;
        line-height: 25px;
        .el-select {
          width: 100px;
        }
      }
    }
    #chart {
      height: calc(100% - 77px);
    }
  }
  .table-wrap {
    background: #fff;
    padding: 35px 38px 35px 30px;
    .el-table {
      .status {
        font-size: 14px;
        line-height: 20px;
        padding: 4px 16px;
        border-radius: 14px;
        display: inline-block;
        &.success {
          background: rgba(88, 206, 147, 0.19);
          color: #128f51;
        }
        &.warning {
          background: rgba(249, 178, 128, 0.19);
          color: #f9b280;
        }
        &.danger {
          background: rgba(255, 6, 6, 0.19);
          color: #ff0606;
        }
      }
      .invoice-type {
        position: relative;
        &:before {
          content: '';
          display: block;
          width: 6px;
          height: 6px;
          background: #3c58fc;
          border-radius: 50%;
          position: absolute;
          left: -8px;
          top: 5px;
        }
      }
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: center;
      .statistics {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  .add-invoice-dialog {
    .total {
      background: rgba(60, 88, 252, 0.06);
      padding: 9px 20px;
      &-item {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 13px;
        color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    }
  }
}
</style>
